<template>
  <div>
    <zm-panel :visible.sync="value" @change="closeAfter" :show-footer="false">
      <div slot="title">
        <div class="dib">{{ infoData.name }}</div>
        <tag-type
          :value="linkInfo.linkStatus || infoData.checkStatus"
          :msg="linkInfo.linkStatusMsg"
        />
      </div>
      <!-- <app-container> -->
        <app-block v-if="isApproval&&isShowApproveBtn" class="optionBtn">
          <!-- 工作台进去的 是否显示审批操作按钮 -->
          <template class="vm">
             <zm-button @click="onEdit" plain v-if="+linkInfo.isEdit === 1 && isWaitMe === '1'">
               修改
              </zm-button>
            <zm-button
              @click="onApproved('0')"
              v-if="+linkInfo.isAction === 1 && isHiddenApproveBtn"
              type="danger"
              plain
            >
              审批驳回
            </zm-button>
            <zm-button
              @click="onApproved('1')"
              v-if="+linkInfo.isAction === 1 && isHiddenApproveBtn"
              type="success"
              plain
            >
              审批通过
            </zm-button>
            <zm-button @click="onRevocation" v-if="showBackBtn" plain type="info">
              撤销审批
            </zm-button>
            <zm-button
              @click="onSubmit"
              type="primary"
              v-if="showSubmit"
              plain
            >
              提交审批
            </zm-button>
          </template>
        </app-block>
        <app-block>
          <zm-tabs :list="titleList" v-model="activeTab" tab-type=""></zm-tabs>
          <components
            :is="activeTab"
            :process-type="processType"
            :business-id="infoData.id"
            :is-load-list="isLoadList"
          ></components>
        </app-block>
      <!-- </app-container> -->
    </zm-panel>
    <!-- 审批操作弹窗 -->
    <approve-input
      v-model="showApproveDialog"
      v-if="showApproveDialog"
      @after-approve="afterApprove"
      ref="approveDialog"
      :type="approveObj.approveType"
    ></approve-input>
    <!-- 编辑产品配置 -->
    <edit-config
      v-if="isShowNewProduct"
      v-model="isShowNewProduct"
      :id="id"
      @re-load="getInfo"
      :is-approve="true"
    ></edit-config>
  </div>
</template>
<script>
// "已通过""3" // "被驳回""2" // "审批中""1" // "已撤销""4" // "未提交""0"
import panelMixin from '@/mixins/panelMixin'
import { titleList } from './const'
import TagType from '@/components/TagType'
import BaseMsg from './components/BaseMsg'
import UseRule from './components/UseRule'
import CommissionPlan from './components/CommissionPlan'
import Record from '@/views/approval/components/Record'
import productDraftApis from '@/api/src/productDraft'
import productApis from '@/api/src/product'
import approveApi from '@/api/src/approve'
import approveMixin from '@/mixins/approveMixin'
import ApproveInput from '@/components/ApproveInput'
import { PROCESS_TYPE } from '@/model'
import EditConfig from '../NewProduct'
const mockId = process.env.NODE_ENV === 'development' ? '' : ''
export default {
  // name: 'ProductConfigDetail',
  components: {
    TagType,
    BaseMsg,
    UseRule,
    CommissionPlan,
    Record,
    EditConfig,
    ApproveInput
  },
  mixins: [panelMixin, approveMixin],
  provide () {
    return {
      $detail: this
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isShowBtn: {
      // 是否展示按钮
      type: Boolean,
      default: true
    },
    isPhysicalProduct: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeTab: 'BaseMsg',
      infoData: {},
      linkInfo: {},
      processType: PROCESS_TYPE.product,
      isShowNewProduct: false
    }
  },
  computed: {
    titleList () {
      // 未提交没有审批记录
      if (this.infoData.checkStatus === '0') {
        return titleList().filter((i) => i.name !== 'Record')
      } else {
        return titleList()
      }
    },
    // 撤销审批
    showBackBtn () {
      return (
        +this.linkInfo.isSponsor === 1 &&
        +this.linkInfo.linkStatus === 1
      )
    },
    approveObj: {
      get () {
        return {
          businessId: this.id,
          processType: this.processType,
          approveType: '0' // 通过 或 驳回
        }
      },
      set () {
        console.log('approveObj set')
      }
    },
    showSubmit () {
      // 发起人且审批状态不是已通过和审批中
      return +this.linkInfo.isSponsor === 1 && (+this.linkInfo.linkStatus !== 3 && +this.linkInfo.linkStatus !== 1)
    }
  },
  watch: {},
  async created () {
    await this.getInfo()
  },
  methods: {
    // 获取详情
    async getInfo () {
      // 是否为草稿产品
      this.infoData = this.isPhysicalProduct ? await productDraftApis.getProductInfo({ id: this.id }) : await productDraftApis.getInfo({ id: this.id })
      if (!this.isShowBtn) {
        return
      } else {
        await this.getLinkStatus()
      }
    },
    async getLinkStatus () {
      this.linkInfo = await approveApi.getLinkStatus({
        ...this.approveObj,
        linkName: this.infoData.name
      })
    },
    // 编辑
    onEdit () {
      this.isShowNewProduct = true
    },
    // 复制
    onCopy () {
      this.$msg.confirm('确定复制?', '提示').then(async () => {
        await productDraftApis.copy({ id: this.id })
        this.$msg.success('复制成功')
        this.$emit('after-save')
      })
    },
    // 删除
    onDel () {
      this.$msg.confirmDelete().then(async () => {
        await productApis.delete({ ids: this.id })
        this.$msg.success('复制成功')
        this.$emit('after-save')
        this.close()
        this.$emit('remove')
      })
    },
    // 设为可售
    onCanSale () {
      this.$msg.confirm('是否设为可售?', '提示').then(async () => {
        await productDraftApis.onSale({ ids: this.id })
        this.$msg.success()
        this[this.initMethodsKey]()
        this.$emit('after-save')
      })
    },
    // 提交审批
    async onSubmit () {
      const row = this.infoData
      if (+row.isComplete === 1) {
        await approveApi.submit({
          processType: this.processType,
          businessId: row.id,
          linkName: row.name
        })
        this[this.initMethodsKey]()
        this.isLoadList = !this.isLoadList
        this.$emit('after-save')
        this.$message.success('操作成功')
      } else {
        this.$message.warning('信息未填写完整，请重新编辑后再提交审批')
      }
    }

  }
}
</script>
<style scoped lang="scss">

</style>
